   <!-- <div>
    <h1>商品分类</h1>
  </div> -->
<template>
  <div>
    <div id="sjlb">
      <div id="sjlb_header" class="clear">
        <div>数据列表</div>
        <div id="sjlb_header_right" class="clear">
          <button>导入分类</button>
          <button @click="tjtk=true">添加</button>
        </div>
      </div>
      <div id="sjlb_content">
        <el-table :data="spflData" border style="width: 100%" :default-sort="{prop: 'id', order: 'ascendant'}">
          <el-table-column prop="id" label="ID" width="auto" min-width="5%">
          </el-table-column>
          <el-table-column prop="fl" label="分类" width="auto" min-width="13%">
          </el-table-column>
          <el-table-column prop="fltb" label="分类图标" width="auto" min-width="13%">
            <div style="width:130px;height:78px;text-align:center;">
              <img src="	http://localhost:8080/getImg?sort=assets/image/Women/Skirt5.jpg" style="width:98px;background-repeat:no-repeat;background-size:cover;overflow:hidden;" alt="">
            </div>
          </el-table-column>
          <el-table-column prop="jb" label="级别" width="auto" min-width="10%">
          </el-table-column>
          <el-table-column prop="spsl" label="商品数量" width="auto" min-width="10%">
          </el-table-column>
          <el-table-column prop="sfsj" label="是否上架" width="auto" min-width="10%">
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.sfsj" @change="sfsj(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sytj" label="首页推荐" width="auto" min-width="7%">
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.sytj" @change="sytj(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="px" label="排序" width="auto" min-width="7%">
          </el-table-column>
          <!-- <el-table-column label="设置" width="auto" min-width="13%">
            <el-button type="text" size="small">新增下级</el-button>
            <el-button type="text" size="small">查看下级</el-button>
          </el-table-column> -->
          <el-table-column label="操作" width="auto" min-width="13%">
            <div slot-scope="scope">
              <el-button type="text" size="small" @click="bjtkData(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="sctk(scope.row)">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div id="sjlb_footer">
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5,10,20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="100">
        </el-pagination> -->
      </div>
    </div>
    <div id="tk_tj">
      <el-dialog title="添加商品分类" :visible.sync="tjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="分类" prop="fl">
            <el-input v-model="ruleForm.fl"></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="jb">
            <el-radio-group v-model="ruleForm.jb">
              <el-radio label="一级"></el-radio>
              <el-radio label="二级"></el-radio>
              <el-radio label="三级"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品数量" prop="spsl">
            <el-input v-model="ruleForm.spsl"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="px">
            <el-radio-group v-model="ruleForm.px">
              <el-radio label="1"></el-radio>
              <el-radio label="2"></el-radio>
              <el-radio label="3"></el-radio>
              <el-radio label="4"></el-radio>
              <el-radio label="5"></el-radio>
              <el-radio label="6"></el-radio>
              <el-radio label="7"></el-radio>
              <el-radio label="8"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="首页推荐" prop="sytj">
            <el-switch v-model="ruleForm.sytj"></el-switch>
          </el-form-item>
          <el-form-item label="是否上架" prop="sfsj">
            <el-switch v-model="ruleForm.sfsj"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tj('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div id="tk_bj">
      <el-dialog title="编辑商品分类" :visible.sync="bjtk" width="70%" :before-close="tkgb">
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="分类" prop="fl">
            <el-input v-model="ruleForm.fl"></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="jb">
            <el-radio-group v-model="ruleForm.jb">
              <el-radio label="一级"></el-radio>
              <el-radio label="二级"></el-radio>
              <el-radio label="三级"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品数量" prop="spsl">
            <el-input v-model="ruleForm.spsl"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="px">
            <el-radio-group v-model="ruleForm.px">
              <el-radio label="1"></el-radio>
              <el-radio label="2"></el-radio>
              <el-radio label="3"></el-radio>
              <el-radio label="4"></el-radio>
              <el-radio label="5"></el-radio>
              <el-radio label="6"></el-radio>
              <el-radio label="7"></el-radio>
              <el-radio label="8"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="首页推荐" prop="sytj">
            <el-switch v-model="ruleForm.sytj"></el-switch>
          </el-form-item>
          <el-form-item label="是否上架" prop="sfsj">
            <el-switch v-model="ruleForm.sfsj"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bj">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style lang="less" scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#sjlb > div {
  border: 1px solid #dcdfe6;
  font-size: 15px;
}
button {
  cursor: pointer;
}
#sjlb {
  background: rgb(242, 242, 242);
  margin-top: 10px;
}
#sjlb > div {
  padding: 15px;
}
#sjlb_header > div:nth-child(1) {
  float: left;
}
#sjlb_header_right {
  float: right;
}
#sjlb_header_right > div {
  float: left;
}
#sjlb_header_right > div:nth-child(2) {
  margin: 0 10px;
}
#sjlb_header_right > div > select {
  margin: 0 10px;
  padding: 6px;
  border: none;
  border-radius: 5px;
  width: 120px;
}
#sjlb_header_right > button {
  background: white;
  border: 1px solid rgb(204, 204, 204);
  padding: 5px 30px;
  margin-left: 10px;
}
/deep/ .el-table .cell,
/deep/ .el-pagination {
  text-align: center;
}
</style>

<script>
export default {
  data() {
    return {
      spflData: [],
      tjtk: false,
      bjtk: false,
      ruleForm: {
        fl: '',
        jb: '',
        spsl: '',
        sytj: false,
        sfsj: false,
        px: ''
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
    getallspfl(data = {}) {/* 刷新数据 */
      this.$axios({
        url: '/goods/getallspfl',
        method: 'get',
        params: data
      }).then((res) => {
        let data = res.data.data;
        data.filter((v) => {
          if (v.sfsj == '是') {
            v.sfsj = true;
          } else {
            v.sfsj = false;
          };
          if (v.sytj == '是') {
            v.sytj = true;
          } else {
            v.sytj = false;
          };
        });
        this.spflData = data;
        this.ruleForm = {
          fl: '',
          jb: '',
          spsl: '',
          sytj: false,
          sfsj: false,
          px: ''
        }
      })
    },
    tkgb(done) {/* 弹框关闭提示 */
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    sfsj() {/* 是否上架滑动开关 */
      if (val.sfsj) {
        val.sfsj = '是'
      } else {
        val.sfsj = '否'
      }
      this.$axios({
        url: '/goods/spflsfsj',
        method: 'post',
        data: val
      }).then(() => {
        if (val.sfsj == '是') {
          this.$message({
            message: '上架成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '下架成功',
            type: 'warning'
          });
        }
        this.getallspfl()
      })
    },
    sytj() {/* 首页推荐滑动开关 */
      if (val.sytj) {
        val.sytj = '是'
      } else {
        val.sytj = '否'
      }
      this.$axios({
        url: '/goods/spflsytj',
        method: 'post',
        data: val
      }).then(() => {
        if (val.sytj == '是') {
          this.$message({
            message: '上架成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '下架成功',
            type: 'warning'
          });
        }
        this.getallspfl()
      })
    },
    sctk(data) {/* 删除提示弹框 */
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    del(data) {/* 数据删除方法 */
      this.$axios({
        url: '/goods/spflsc',
        method: 'post',
        data: data
      }).then(() => {
        this.getallspfl();
      })
    },
    tj(formName) {/* 添加弹框 */
      if (this.ruleForm.sfsj) {
        this.ruleForm.sfsj = '是'
      } else {
        this.ruleForm.sfsj = '否';
      }
      if (this.ruleForm.sytj) {
        this.ruleForm.sytj = '是'
      } else {
        this.ruleForm.sytj = '否';
      }
      this.$axios({
        url: '/goods/spfltj',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.tjtk = false;
        this.getallspfl();
      })
    },
    bjtkData(data) {/* 编辑弹框数据传递 */
      this.bjtk = true;
      this.ruleForm = { ...data };
    },
    bj(res) {/* 确认编辑 */
      this.$axios({
        url: '/goods/spflbj',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.bjtk = false;
        this.getallspfl();
      })
    },
  },
  mounted() {/* 默认运行数据刷新 */
    this.getallspfl();
  },
}
</script>


